/**
 * 课程表中间显示星期和日期的组件
 * 外部参数：
 * firstDay:本学期开始上课的第一天的日期，格式必须是年月日  YYYY-MM-DD
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text
} from 'react-native';

import moment from 'moment';
import PropTypes from 'prop-types';


export default class WeekName extends Component {
    constructor(props){
        super(props);
        this.state = {
            weekNameList:['一','二','三','四','五','六','日']
        }
    }

    render() {
        let firstDay = moment(this.props.firstDay,'YYYY-MM-DD');
        if(isNaN(firstDay.date())){
            firstDay = moment('2017-03-05','YYYY-MM-DD');
        }
        let firstDayOfWeek = firstDay.add(this.props.showWeek - 1,'w').subtract(1,'d');
        let weekNameTexts = this.state.weekNameList.map((name,index)=>{
            return (
                <View key={index} style={styles.textOfoTexts}>
                    <Text>{name}</Text>
                    <Text>{firstDayOfWeek.add(1,'d').date()}</Text>
                </View>
            )
        })
        let month = (firstDayOfWeek.month() + 1) + '月';
        return (
            <View style={ styles.container }>
                <View style={ styles.fText }>
                    <Text>{month}</Text>
                </View>
                <View style={ styles.oText }>
                    {weekNameTexts}
                </View>
            </View>
        )
    }
}

WeekName.propTypes = {
    firstDay: PropTypes.string.isRequired,
    showWeek: PropTypes.number.isRequired
}

const styles=StyleSheet.create({
    container:{
        flexDirection:'row',
        alignItems: 'center',
        backgroundColor: '#ddd'
    },
    textOfoTexts:{
        flex:1,
        alignItems:'center',
        borderColor:'#eee',
        borderRightWidth: 1
    },
    fText:{
        width:40,
        height:40,
        backgroundColor:'#aaa',
        justifyContent:'center',
        alignItems:'center'
    },
    oText:{
        flex:1,
        flexDirection:'row',
    }
}) 